<template>
  <div class="home">
    <!-- categoryJson状态管理数据 -->
    <NavigateView></NavigateView>
    <!-- bannerJson状态管理数据 + Swiper轮播图插件 -->
    <ListView></ListView>
    <!-- null -->
    <TodayView></TodayView>
    <!-- null -->
    <RankView></RankView>
    <!-- null -->
    <LikeView></LikeView>
    <!-- floorJson状态管理数据 + Swiper轮播图插件 -->
    <FloorView v-for="(floor, index) in floorInfo" v-bind:key="floor.id" v-bind:floor="floor"></FloorView>
    <!-- null -->
    <BrandView></BrandView>
  </div>
</template>

<script>
// @ is an alias to /src
import NavigateView from "@/components/navigate/NavigateView.vue";
import ListView from "@/views/home/list/ListView.vue";
import TodayView from "@/views/home/today/TodayView.vue";
import RankView from "@/views/home/rank/RankView.vue";
import LikeView from "@/views/home/like/LikeView.vue";
import FloorView from "@/views/home/floor/FloorView.vue";
import BrandView from "@/views/home/brand/BrandView.vue";
import {mapState} from "vuex";

export default {
  name: 'HomeView',
  components: {
    NavigateView,
    ListView,
    TodayView,
    RankView,
    LikeView,
    FloorView,
    BrandView
  },
  computed: {
    ...mapState({
      floorInfo: (state) => {
        return state.home.floor;
      }
    }),
  },
  mounted() {
    this.$store.dispatch("getFloorJson");
  }
}
</script>

<style lang="less" scoped>

</style>
